<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        width: 300px;
        height: 300px;
        border: 1px solid black;
        padding: 20px 50px;
        box-sizing: border-box;
        margin-top: 30px;
    }

    img {
        width: 200px;
        height: 200px;
    }

    * {
        list-style: none;
    }

    .gwc {
        width: 100px;
        height: 30px;
        margin-left: 50px;
    }
</style>

<body>
    <h1>商品详情页</h1>
    <button class="gwc">购物车</button>
    <div>

    </div>

    <script>
        var g = localStorage.getItem('good')
        var good = JSON.parse(g)
        var a = localStorage.getItem('all')
        var all = JSON.parse(a)



        good.forEach(item => {
            document.querySelector('div').innerHTML = `<li><img src="${item.img}"></li>
            <li>${item.name}</li>
            <li>￥${item.price}</li>
            <li><button onclick='add(${item.id})'>加入购物车</button></li>`
        })

        function add(id) {
            var arr3 = []
            good.forEach(item => {
                if (item.id == id) {
                    arr3.push(item)
                    localStorage.setItem('gwc', JSON.stringify(good))
                    console.log(arr3);
                }
            })
        }

        document.querySelector('.gwc').addEventListener('click', () => {
            location.assign('./2.28机试购物车.html')
        })


    </script>
</body>

</html>